'use client'
import Link from 'next/link';
import Image from 'next/image'
import classnames from 'classnames'
import styles from './index.module.css'
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
import LogoImage from "@/app/assets/images/shzn_logo.png"
import NavItem from './NavItem';
import classNames from 'classnames';

interface WebSiteNavProps {
  isShadow?: boolean
}

interface SubMenuData {
  title: string,
  code: string,
  children?: SubMenuData[]
}


const WebSiteNav: React.FC<WebSiteNavProps> = ({
  isShadow = true
}) => {
  const pathname = usePathname();
  const [subMenus, setSubMenus] = useState<any>({});
  const [isFixed, setIsFixed] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', onScrollEvent)
    getSubMenuList();
    return () => {
      window.removeEventListener('scroll', onScrollEvent)
    }
  }, [])

  async function getSubMenuList() {
    const { data } = await getSubMenus();
    setSubMenus(data);
  }

  function getWraperStyles() {
    return classnames(
      "lg h-[58px] flex justify-center bgc-primary",
      isFixed && styles.navFixed,
      {
        'shadow-sm shadow-black': isShadow
      }
    )
  }

  /** 监听滚动 */
  function onScrollEvent() {
    if (window.scrollY >= 84) {
      setIsFixed(true);
    } else {
      setIsFixed(false);
    }
  }

  function renderProducts() {
    const menus = subMenus['product'] || [];

    return (
      <div className={classNames('flex p-4 flex-col', styles.subMenu)}>
        { 
          menus.map((item: SubMenuData, index: number) => {
            const { title, code, children } = item;
            return (
              <ul key={index} className='flex flex-col'>
                <li className='pt-2 pb-2'>
                  <Link 
                  className='field-title text-slate-800 text-md hover:text-red-400' 
                  href={`/pages/productIntro/${code}`}>{title}</Link>
                </li>
                {
                  children?.map((sItem, sIndex) => {
                    return (
                      <li key={`sub_${sIndex}`}>
                        <Link 
                          className='block text-gray-500 text-sm hover:text-red-400 pt-1 pb-1'
                          href={`/pages/productIntro/${sItem.code}`}>{sItem.title}</Link>
                      </li>
                    )
                  })
                }
              </ul>
            )
          })
        }
      </div>
    )
  }

  return (
    <div className={getWraperStyles()}>
      <div className='max-w-screen-xl min-w-[1024px] flex justify-between h-full w-full items-center'>
        <div>
          <Image src={LogoImage} alt='首厚智能' height={52} />
        </div>
        <ul className={classnames('flex space-x-6 h-full items-center mb-0', styles.navRightWraper)}>
          <NavItem path='/' title='首页' />
          <NavItem path='/pages/productIntro' title='业务介绍' menuWidth={260} >
            { renderProducts() }
          </NavItem>
          <NavItem path='/pages/customerCase' title='客户案例' />
          <NavItem path='/pages/news' title='新闻资讯' />
          <NavItem path='/pages/abouts/company' title='关于首厚' />
          {/* <NavItem path='/pages/contactUs' title='联系我们' /> */}
          <li className='flex items-center text-white'>
            <span><i className="iconfont icon-kefu mr-1"></i> 023- 6751 3560</span>
          </li>
        </ul>
      </div>
    </div>
  )
}

async function getSubMenus() {
  return {
    data: {
      'product': [
        { title: 'LIMS信息管理系统', code: 'lims' },
        { title: '双碳管理系统', code: 'carbon' }
        // { title: '实验室设计', code: 'labDesign', children: [
        //   { title: 'LIMS管理系统', code: 'lims' }
        // ] },
        // { title: '管理平台搭建', code: 'managePlat', children: [
        //   { title: '培训管理平台', code: 'trainAdmin' },
        //   { title: '文件管理平台', code: 'fileAdmin' },
        //   { title: '检测委托下单APP', code: 'appAdmin' },
        //   { title: '办公自动化（OA）', code: 'oaAdmin' },
        //   { title: '数据安全管理', code: 'safeAdmin' },
        //   { title: '职业健康系统', code: 'healthAdmin' },
        //   { title: '物资管理系统', code: 'assetsAdmin' },
        //   { title: '应急管理系统', code: 'engineAdmin' },
        //   { title: '采样系统', code: 'sampleAdmin' },
        // ] },
        // { title: '硬件配套', code: 'hardware' },
        // { title: '运维服务', code: 'operation' },
      ]
    }
  }
}

export default WebSiteNav